<template>
    <el-aside class="pug-imgbox-aside" width="220px">
      <div class="top">
        <div v-for="i in 10" class="aside-list" 
          @click="handleActiveById(i)" :class="[activeRef == i ? 'active' : '']">
          <span>分类标题</span>
          <el-button @click="handlerOpen" text type="primary" class="ml-auto px-1" size="small">
            <el-icon :size="18" class="el-icon--right">
              <Edit />
            </el-icon>
          </el-button>
          <el-button @click="handleClose" text type="primary" class="px-1" size="small">
            <el-icon :size="18" class="el-icon--right">
              <Close />
            </el-icon>
          </el-button>
        </div>
      </div>
      <div class="page">
        <el-pagination layout="prev,next" :total="total" :current-page="pageNo" :page-size="pageSize"
          @current-change="loadData" background></el-pagination>
      </div>
    </el-aside>

    <pug-drawer title="分类管理" ref="categoryRef" @submit="handlerSubmit">
        <el-form :model="form" ref="formCategoryRef" :rules="rules"  :inline="false" size="normal">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入分类名称" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="分类排序" prop="order">
            <el-input-number :min="1" :max="1000" v-model="form.order"  ></el-input-number>
          </el-form-item>
        </el-form>
    </pug-drawer>
</template>

<script setup>

import { ref,reactive} from 'vue';

const pageNo = ref(0);
const total = ref(0);
const pageSize = ref(10);
const formCategoryRef = ref(null);
const categoryRef = ref(null);
const activeRef = ref(0)

const form = reactive({
  name:"",
  order:10
});

// 验证规则
const rules = {
  name:[{
    required:true,
    message:"请输入分类名称",
    trigger:"blur"
  }]
}



const handlerSubmit = () => {
  formCategoryRef.value.validate((valid)=>{
     if(!valid){
       return;
     }

     alert("表单提交成功" +JSON.stringify(form))
  })
}



const emit = defineEmits(["change"]);
const handleActiveById = (id)=>{
    activeRef.value = id;
    emit("change",id);
}


/*打开抽屉*/
const handlerOpen = () => {
  categoryRef.value.open();
}



const loadData = (p) => {
  alert("当前页是：" + p)
  pageNo.value = p;
}

const handleEdit = ()=>{
  categoryRef.value.open();
}

const handleClose = ()=>{
  alert("删除")
}


/*暴露给上一层去调用 */
defineExpose({
  handlerOpen
})



  // defineProps({
  //   active:{
  //     type:Boolean,
  //     default:false
  //   }
  // })



</script>

<style>
.pug-container-cnt{position: relative;z-index: 1001;}
.pug-imgbox-aside  .el-button+.el-button {
  margin: 0;
}

.pug-imgbox-aside {
  position: relative;
  border-right: 1px solid #eee;
}

.pug-imgbox-aside .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.pug-imgbox-aside .page {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #eee;
}


.aside-list {
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 14px;
  color: #666;
}

.aside-list:hover,
.active {
  @apply bg-blue-50
}
</style>